<template>
    <div>
      <div>
        <Table border :columns="columns" :data="data">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="dealToCommunity(row)">发牌</Button>
          </template>
        </Table>
        <template>
          <Page style="text-align: right;margin-top: 20px" :total="params.totalRecord" show-elevator @on-change="changePageNo"/>
        </template>
      </div>
      <Modal
        v-model="modal"
        @on-ok="saveInfo"
        title="发牌">
        <div>
          <template>
            <Tree v-if="!loading" :data="data2" show-checkbox ref="tree" @on-check-change="pickTreeNode"></Tree>
              <Row>
                <Col span="8" offset="11">
                  <Spin v-if="loading" size="large"></Spin>
                </Col>
              </Row>
          </template>
        </div>
      </Modal>
    </div>
</template>

<script>
import { findBrandList, findOfficeList, dealToCommunity } from '@/api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      data2: [],
      show: true,
      columns: [
        {
          title: '挂牌名称',
          key: 'brand_name'
        },
        {
          title: '类别',
          key: 'categoryall'
        },
        {
          title: '级别',
          key: 'levelall'
        },
        {
          title: '室内/外',
          key: 'roomall'
        },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '失效时间',
          key: 'invalid_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data: [],
      pickRow: {},
      modal: false,
      formData: {},
      pickInfo: {},
      loading: true,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    init () {
      let data = this.params
      findBrandList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.init()
    },
    pickTreeNode (e1, e2) {
      console.log(e1)
      console.log(e2)
      this.pickInfo = {}
      this.pickInfo = e1
    },
    dealToCommunity (e) {
      this.pickRow = {}
      this.pickRow = e
      this.loading = true
      this.modal = true
      this.formData = {}
      this.findOfficeList()
    },
    findOfficeList () {
      let data = {
        brand_id: this.pickRow.id
      }
      findOfficeList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data2 = ret.data.data
          this.loading = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    saveInfo () {
      let data = {
        brand_id: this.pickRow.id,
        grade: this.formData.grade,
        info: this.pickInfo
      }
      dealToCommunity(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '保存成功',
            desc: ret.data.errmsg
          })
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    }

  },
  mounted () {
    this.init()
  }

}
</script>

<style scoped>
  .bench_search {
    margin-bottom: 10px;
  }
</style>
